<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="velocity.min.js"></script>
</head>
<body>
    <div id="app">
        <input placeholder="请输入你想要查找的名字" v-model="query"></input>
        <button @click="show = !show">显示消失</button>
        <fade :query="query" :items="items">
            <li v-for="(item,index) in ComputedList" :key="item.msg" :data-index="index">
                {{item.msg}}
            </li>
        </fade>
        <fade :show="show" >
            <li v-if="show" :key="show">我是可以控制显示消失的内容</li>
        </fade>
    </div>
    <template id="temp">
        <transition-group name="item" tag="ul" 
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
        v-bind:css="false">
            <slot></slot>
        </transition-group>
    </template>
    <script>
        Vue.component('fade',{
            props:['query','items','show'],
            template:'#temp',
            methods:{
                beforeEnter(el){
                    el.style.opacity = 0
                    el.style.height = 0
                },
                enter(el,done){
                    var delay = el.dataset.index * 150
                    setTimeout(function(){
                        Velocity(el,{opacity:1,height: '1.6em'},{complete:done})
                    },delay)
                    
                },
                leave(el,done){
                    var delay = el.dataset.index * 150
                    setTimeout(function(){
                    Velocity(el,{opacity:0,height: '0'},{complete:done})
                },delay)
                },
                
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                items:[{msg:"张三"},
                {msg:"李四"},
                {msg:"张某某"},
                {msg:"李某某"},
                {msg:"安欣"},],
                query:'',
                show:true
            },
            computed: {                     // 计算属性
                ComputedList () {
                    var vm = this.query		      // 获取到input输入框中的内容
                    var nameList = this.items	  // 数组
                    return nameList.filter(function (item) {
                        return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
                    })
                }
            },
        })
    </script>
</body>
</html>